<script setup lang="ts">
import { handleApiError, sysApi } from '@/api'
import NavBar from '@/components/NavBar/index.vue'
import { reLaunch } from '@/utils/navigation'
import { storage } from '@/utils/storage'
import RootTabBar from '../components/RootTabBar.vue'

function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        const [error] = await sysApi.logout()
        if (error) {
          return handleApiError(error)
        }
        storage.remove('token')
        reLaunch({ url: '/pages/login/index' })
      }
    },
  })
}
</script>

<template>
  <view class="user-page">
    <NavBar title="我的" :show-back="false" />

    <view class="header">
      <view class="user-card">
        <view class="avatar-section">
          <view class="avatar-wrapper">
            <image src="@/static/images/avatar2.png" mode="aspectFill" class="avatar" />
          </view>
        </view>
        <view class="user-stats">
          <view class="flex-center">
            我叫王哈哈
          </view>
        </view>
      </view>
    </view>

    <view class="menu-section">
      <view
        class="menu-item"
      >
        <view class="menu-content" @click="handleLogout">
          <view class="left">
            <uv-icon name="setting" size="30" color="#666" />
            <text class="menu-title">
              退出登录
            </text>
          </view>
        </view>
      </view>
    </view>

    <RootTabBar :value="1" />
  </view>
</template>

<style lang="scss" scoped>
.user-page {
  background-color: #f8f9fc;
  padding-bottom: 100rpx;

  .header {
    padding: 30rpx;

    .user-card {
      background: linear-gradient(135deg, #2979ff, #5e96ff);
      border-radius: 24rpx;
      padding: 40rpx 30rpx;
      color: #ffffff;
      box-shadow: 0 8rpx 20rpx rgba(41, 121, 255, 0.2);

      .avatar-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40rpx;

        .avatar-wrapper {
          position: relative;
          margin-bottom: 20rpx;

          .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 60rpx;
            border: 4rpx solid rgba(255, 255, 255, 0.8);
          }

          .level-badge {
            position: absolute;
            bottom: -6rpx;
            left: 50%;
            transform: translateX(-50%);
            background: #ff9500;
            color: #ffffff;
            font-size: 20rpx;
            padding: 4rpx 16rpx;
            border-radius: 12rpx;
            border: 2rpx solid #ffffff;
          }
        }

      }
    }
  }

  .menu-section {
    margin: 0 30rpx;
    background: #ffffff;
    border-radius: 24rpx;
    padding: 10rpx 0;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .menu-item {
      padding: 20rpx 30rpx;

      &:active {
        background-color: #f5f7ff;
      }

      .menu-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          align-items: center;
          gap: 20rpx;

          .menu-title {
            font-size: 30rpx;
            color: #333;
          }
        }
      }

      &:not(:last-child) {
        border-bottom: 2rpx solid #f5f5f5;
      }
    }
  }
}
</style>
